import { ViolationCategoryData } from '../../data'

export const getOption = (
  result: ViolationCategoryData[],
  colors: string[][]
) => {
  let height = 172

  // NOTE: 需要向上对齐，不能居中显示
  switch (result.length) {
    case 1:
      height = 64
      break
    case 2:
      height = 100
      break
    case 3:
      height = 136
      break
    case 4:
    default:
      height = 172
  }

  return {
    width: 300,
    height: height,
    grid: {
      top: '3%',
      bottom: -24,
      right: 100,
      left: 0,
      containLabel: true
    },
    xAxis: {
      max: 100,
      show: false
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: result.map((item) => item.name),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          inside: true,
          color: 'rgba(255, 255, 255, 0.64)',
          margin: 0,
          padding: [0, 0, 8, 0],
          align: 'left',
          verticalAlign: 'bottom',
          formatter: (value: string) => {
            return '{title|' + value + '}'
          },
          rich: {
            title: {
              width: 50,
              fontSize: 12
            }
          }
        }
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: result.map((item) => item.name),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 0,
          interval: 0,
          inside: true,
          padding: [0, 0, 8, 0],
          color: (value: string) => {
            const findIndex = result.findIndex((item) => item.name === value)

            return colors[findIndex][2]
          },
          fontSize: 12,
          align: 'right',
          verticalAlign: 'bottom',
          formatter: (value: string) => {
            const findResult = result.find((item) => item.name === value)

            return `${findResult?.piont}%`
          }
        }
      }
    ],
    series: [
      {
        data: Array(result.length).fill(100),
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        barWidth: 6,
        animation: false,
        barGap: '-100%',
        silent: false,
        itemStyle: {
          color: 'rgb(255, 255, 255, 0.08)',
          borderRadius: 20
        }
      },
      {
        type: 'bar',
        showBackground: false,
        barMinWidth: 6,
        yAxisIndex: 0,
        data: result.map((item) => item.piont),
        barWidth: 6,
        itemStyle: {
          normal: {
            borderRadius: 20,
            color: (params: { dataIndex: number }) => {
              return {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: colors[params.dataIndex][0]
                  },
                  {
                    offset: 1,
                    color: colors[params.dataIndex][1]
                  }
                ],
                global: false
              }
            }
          }
        }
      }
    ],
    dataZoom: [
      {
        yAxisIndex: [0, 1],
        show: false,
        type: 'slider',
        startValue: 0,
        endValue: 3
        // animationDuration: 20,
        // // animationThreshold: 20,
        // stateAnimation: {
        //   duration: 20
        // }
      }
    ]
  }
}
